<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, viewport-fit=cover"
    />
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
    <style>
      *:not(input, textarea) {
        -webkit-touch-callout: none;
        -webkit-user-select: none; /* Disable selection/Copy of UIWebView */
      }
      html,
      body {
        margin: 0px;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
          "Helvetica Neue", sans-serif;
      }
      .sm-btn-default:hover,
      .sm-btn-success:hover,
      .sm-btn-loading:hover,
      .sm-btn-fail:hover {
        -moz-box-shadow: 0px 0px 0px #ffffff !important;
        -webkit-box-shadow: 0px 0px 0px #ffffff !important;
        box-shadow: 0px 0px 0px #ffffff !important;
      }
      /* 验证按钮宽度自适应 */
      .nc-container #nc_1_wrapper {
        width: 100vw !important;
      }
      .sm-btn-wrapper .sm-btn,
      .sm-btn-wrapper #sm-btn-bg {
        width: calc(100vw - 2px) !important;
      }
      .sm-btn-wrapper #rectMask {
        width: 100vw !important;
      }
    </style>
  </head>
  <body>
    <div id="captcha_button"></div>
    <script type="text/javascript">
      const bridgeMethod = (method, data) => {
        if (window.webkit) {
          window.webkit.messageHandlers[method].postMessage(data);
        } else if (window.messageHandlers) {
          window.messageHandlers[method](JSON.stringify(data));
        } else {
          console.log(method, data);
        }
      };

      const bridgeOnSuccess = (data) => bridgeMethod("onSuccess", data);
      const bridgeOnFailure = (data) => bridgeMethod("onFailure", data);
      const bridgeOnError = (data) => bridgeMethod("onError", data);

      const init = (type, size = {}, optionJsonString, customStyle) => {
        let option = JSON.parse(optionJsonString);
        option = Object.assign(option, size, {
          renderTo: "captcha_button",
          success: (data) => {
            bridgeOnSuccess(data);
          },
          fail: (failCode) => {
            bridgeOnFailure({ failCode });
          },
          error: (errorCode) => {
            bridgeOnError({ errorCode });
          },
        });
        if (type === "ic" && option.height) {
          option.height -= 2;
        }

        AWSC.use(type, (state, module) => {
          window.captcha_button = module.init(option);
        });

        setTimeout(() => {
          const styleNode = document.createElement("style");
          const styleText = document.createTextNode(`
          .nc_scale {
            height: ${option.height}px !important;
          }
          .nc_scale span {
            height: ${option.height - 2}px !important;
            line-height: ${option.height - 2}px !important;
          }
          .nc-container .nc_wrapper .errloading {
            padding: 0px 5px;
            height: ${option.height - 2}px !important;
            line-height: ${option.height - 2}px !important;
          }
          ${customStyle || ""}
        `);
          styleNode.type = "text/css";
          styleNode.appendChild(styleText);
          document.getElementsByTagName("body")[0].appendChild(styleNode);
        }, 100);
      };

      window._init = init;
    </script>
  </body>
</html>
